<template>
  <div class="container clearfix">
  <div class="slider-three leftfix" v-for="dish in $route.query.dishes" :key="dish.dishId">
            <div class="slider-wrapper-three">
              <router-link :to="{
              name:'detail',
              params:{
                  dishId:dish.dishId,
                  dishUrl:dish.dishUrl,
                  dishName:dish.dishName,
                  dishType:dish.dishType,
                  fat:dish.fat,
                  heat:dish.heat,
                  minerals:dish.minerals,
                  protein:dish.protein,
                  carbohydrates:dish.carbohydrates,
                  description:dish.description,
                  dishMake:dish.dishMakes
              }
             }"><img  :src="require('../Home/images/'+dish.dishUrl)" alt="" style="width: 275px;height: 150px;"/></router-link>
            </div>
            <div class="slider-footer">
              <p>{{dish.dishName}}</p>
            </div>
          </div>
        </div>
</template>

<script>

export default {
    data() {
      return {

      }
    },
  //      methods: {
  //       getImageUrl(image) {
  //         console.log(image)
  //         return "http://localhost:8080/img/" + image+".jpg";

  //   }
  // },
}

</script>

<style scope>
.slider-three{
  width: 275px;
  height: 195px;
  overflow: hidden;
  margin-left: 15px;
}
.slider-wrapper-three{
  width: 100%;
  height: 150px;
}
.slider-footer {
  height: 80px;
  background-color: rgb(100, 67, 68);
  padding: 12px 12px 0 12px;
  position: relative;
  line-height: 25px;
  text-align: center;
  color: white;
}
.container{
   width: 1160px;
}
.leftfix{
  float: left;
}

.rightfix{
  float: right;
}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
</style>
